<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">

        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="queryHouse" class="demo-dynamic">

                    <el-form-item label="入住时间段">
                        <el-date-picker
                                v-model="queryHouse.intoDates"
                                type="daterange"
                                range-separator="To"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :size="size"
                                value-format="YYYY-MM-DD"/>
                    </el-form-item>

                    <el-form-item label="房屋状态">
                        <el-select
                                v-model="queryHouse.status"
                                placeholder="选择状态"
                                style="width: 120px"
                                clearable>
                            <el-option label="入住" value="1" ></el-option>
                            <el-option label="空房" value="0" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="请输选择业主">
                        <el-select
                                v-model="queryHouse.ownerId"
                                placeholder="选择业主"
                                size="large"
                                clearable
                                style="width: 120px">
                            <el-option
                                    v-for="item in owners"
                                    :key="item.value"
                                    :label="item.username"
                                    :value="item.id"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchHouse">
                            <el-icon><Search /></el-icon>
                            搜索
                        </el-button>
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>

        <el-table :data="houses" style="width: 95%">
            <el-table-column prop="id" label="编号" ></el-table-column>
            <el-table-column prop="houseNo" label="房屋编号"></el-table-column>
            <el-table-column prop="floor" label="楼层" ></el-table-column>
            <el-table-column prop="area" label="面积"></el-table-column>
            <el-table-column prop="intoDate" label="入住时间" width="120">

            </el-table-column>
            <el-table-column prop="status" label="房屋状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status == 0 ? 'primary' : 'success'">
                        {{ scope.row.status == 1 ? "入住" :"空房" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="building.numbers" label="楼栋"></el-table-column>
            <el-table-column prop="building.units" label="单元"></el-table-column>
            <el-table-column prop="owner.username" label="业主"></el-table-column>
            <el-table-column prop="owner.tel" label="电话"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column label="操作">
                <!--  模板 (这个地方 是一个占位置 可以自定义 ) scope当前行的对象数据 -->
                <template #default="scope">
                    <!-- 按钮 1  编辑-->
                    <el-button size="large" type="primary" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 侧边栏 抽屉组件
             drawer 是否抽出来
        -->
        <el-drawer v-model="drawer" title="修改house的抽屉">
            <!-- 回显内容 表单 -->
            <el-form
                    :model="house" class="demo-form-inline">
                <el-form-item label="请输入房屋编号" prop="houseNo">
                    <el-input-number v-model="house.houseNo" placeholder="房屋编号" clearable />
                </el-form-item>
                <el-form-item label="请输入楼层" prop="floor">
                    <el-input-number v-model="house.floor" placeholder="请输入楼层" clearable />
                </el-form-item>

                <el-form-item label="请输入面积" prop="area">
                    <el-input-number v-model="house.area" placeholder="请输入面积" clearable />
                </el-form-item>

                <!-- 添加时间选择器
                    clearable 可以清理
                    value-format="YYYY-MM-DD"  日期格式化
                -->
                <el-form-item label="选择入住时间" prop="intoDate">
                    <el-date-picker
                            v-model="house.intoDate"
                            type="date"
                            placeholder="选择入住时间"
                            clearable
                            value-format="YYYY-MM-DD"
                    />
                </el-form-item>

                <!--
                    el-radio :label="1" 这里注意
                       :label 绑定数据 进行回显   和  v-model="house.status" 保持一致数据回显
                       v-model="house.status" 这个的选中就是拿到 :label  里面的值    （3.0 以下版本可以使用）
                       :value  (label 是显示的文本  value 是选中的值 )（都可以使用）
                       历史遗留版本问题  后期统一使用 :value
                -->
                <el-form-item label="选择状态" prop="status">
                    <el-radio-group v-model="house.status">
                        <el-radio :value="1">入住</el-radio>
                        <el-radio :value="0">空房</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="house.remarks" clearable />
                </el-form-item>

                <el-form-item label="请输选择楼栋" prop="buildingId">
                    <el-select
                            v-model="house.buildingId"
                            placeholder="选择楼栋"
                            size="large"
                            style="width: 180px">
                        <el-option
                                v-for="item in buildings"
                                :key="item.value"
                                :label="item.numbers"
                                :value="item.id"/>
                    </el-select>
                </el-form-item>

                <!-- 下拉框
                     el-select  选择器   绑定的事 ownerId
                          下拉选项  el-option
                             owners 进行遍历
                                label  展示的文本   方便页面展示
                                value  提交的值     提交到数据库的值
                                :value  是 v-bind 的 简写 属性绑定
                -->
                <el-form-item label="请输选择业主" prop="ownerId">
                    <el-select
                            v-model="house.ownerId"
                            placeholder="选择业主"
                            size="large"
                            style="width: 180px">
                        <el-option
                                v-for="item in owners"
                                :key="item.value"
                                :label="item.username"
                                :value="item.id"/>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click=" drawer = false">取消</el-button>
                    <el-button type="primary" @click="updateHouse">
                        提交数据
                    </el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

    <script>
        const { createApp,ref,onMounted } = Vue
        const { ElMessage } = ElementPlus

        const app = createApp({
            setup(){
                let houses = ref([]);
                let buildings = ref([]);
                let owners = ref([]);

                //时间范围默认是数组 需要使用给对象绑定 设置一个数组
                let queryHouse = ref({
                    intoDates:[]
                });

                //抽屉 是否显示
                const drawer = ref(false)

                //添加房屋对象
                const house = ref({
                })

                //搜索
                let searchHouse = ()=>{

                    //length
                    console.log(queryHouse.value.intoDates)
                    if (queryHouse.value.intoDates){
                        //存在数组
                        //如果存在 把数组中的数据 拿出来
                        queryHouse.value.start = queryHouse.value.intoDates[0]
                        queryHouse.value.end = queryHouse.value.intoDates[1]
                    }else {
                        queryHouse.value.start = null
                        queryHouse.value.end = null
                    }

                    //发送数据到服务器
                    //post 通过 data   携带数据
                    //get 通过 params 携带数据  参数在url上进行拼接 (需要携带键值对)
                    axios({
                        method:"get",
                        url:"/house/list",
                        params:{
                            start:queryHouse.value.start,
                            end:queryHouse.value.end,
                            status:queryHouse.value.status,
                            ownerId:queryHouse.value.ownerId
                        }
                    }).then(resp=>{
                        houses.value = resp.data.data;
                    })
                }

                //提交数据
                let updateHouse = ()=>{
                    axios({
                        method:"put",
                        url:"/house",
                        data:house.value
                    }).then(resp=>{
                        // 关闭抽屉
                        drawer.value = false;
                        // 提示
                        //更新数据
                        ElMessage({
                            message: "操作成功",
                            type: 'success',
                        })
                        //03 加载数据
                        initData()

                    })
                }


                //发送请求
                function initData(){
                    axios.get("/house/list")
                        .then((data)=>{
                            console.log(data.data)
                            //服务器的数据给vue
                            // data.data 这个解析的事返回的 数据
                            // 返回的数据是 result 解析这个下面的data 所以需要2个data解析
                            houses.value = data.data.data;
                        });
                }

                let handleEdit = (obj)=>{
                    //抽屉打开
                    drawer.value = true;
                    //回显
                    house.value = JSON.parse(JSON.stringify(obj));

                }

                let initBuilds = ()=>{
                    axios.get("/building/list")
                        .then((data)=>{
                            console.log(data.data)
                            //服务器的数据给vue
                            buildings.value = data.data;
                        });
                }

                let initOwner = ()=>{
                    axios.get("/owner/list")
                        .then((data)=>{
                            console.log(data.data)
                            //服务器的数据给vue
                            // data.data 这个解析的事返回的 数据
                            // 返回的数据是 result 解析这个下面的data 所以需要2个data解析
                            owners.value = data.data.data;
                        });
                }

                //这个函数是 页面初始化的时候  执行的钩子好函数
                //一般都是在这个函数中 加载数据 比如页面发请求 获取数据
                onMounted(()=>{
                    initData()
                    //初始化楼层
                    initBuilds()
                    //初始化业主
                    initOwner()

                })

                return {
                    houses,house,drawer,handleEdit,buildings,owners,
                    updateHouse,queryHouse,searchHouse
                }
            }
        });
        app.use(ElementPlus)


        app.mount('#app')

    </script>

</body>
</html>